<!--
 * @Author: wangjian
 * 656876071@qq.com
 * @Date: 2024-07-19 11:39:23
 * @LastEditTime: 2024-09-11 14:13:25
 * @FilePath: src/views/sxln/member/Entrance.vue
 * @Description: 
 -->
<script setup lang="ts">
import {h, onMounted, provide, ref} from 'vue'
import {SearchOutlined, CiCircleFilled, PlusOutlined} from '@ant-design/icons-vue'
import MemberDetail from "@/views/sxln/member/MemberDetail.vue";
import {useEntrance} from "@/views/sxln/member/LnMemberHooks";
import {DICT_COLLECTION_SYMBOL, useDict} from "@/core/common/hooks/DictHooks";
import TableDictCellProp from "@/core/common/component/TableDictCellProp.vue";

const {
  loading,
  params,
  columns,
  dataSource,
  pagination,
  handleTableChange,
  query,
  reset,
  deleteSingle,
} = useEntrance()


// dict
const dictCollection: any = ref({})
provide(DICT_COLLECTION_SYMBOL, dictCollection)

onMounted(() => {
  useDict("base_sex", "member_type").then(kv => {
    dictCollection.value = kv
    query()
  })
})

//modal
const formModal = ref()

</script>

<template>
  <div class="query-handle-panel">
    <a-form layout="inline" class="query-form">
      <a-form-item label="姓名">
        <a-input placeholder="请输入姓名" allow-clear v-model:value="params.realName"/>
      </a-form-item>
      <a-form-item label="会员号">
        <a-input placeholder="请输入会员号" allow-clear v-model:value="params.memberId"/>
      </a-form-item>
        <a-space>
          <a-button type="default" @click="query()" :icon="h(SearchOutlined)">查询</a-button>
          <a-button type="primary" style="background-color: orange" @click="reset" :icon="h(CiCircleFilled)">重置
          </a-button>
          <a-button type="primary" :icon="h(PlusOutlined)" @click="formModal.showAddForm()">录入</a-button>
        </a-space>
    </a-form>
    <!--    <a-row class="handle-bar">-->
    <!--            <a-button type="primary" style="background-color: orange" @click="formModal.openEdit('nihao')">修改</a-button>-->
    <!--    </a-row>-->
  </div>
  
  <div class="table-container">
    <a-table class="table"
             :data-source="dataSource"
             :columns="columns"
             :pagination="pagination"
             @change="handleTableChange"
             size="middle"
             :loading="loading"
    >
      <template #bodyCell="{column, text,record}">
        <template v-if="column.dataIndex === 'sex'">
          <div>
            <table-dict-cell-prop :dict="dictCollection['base_sex']" :value="record.sex"/>
          </div>
        </template>
        <template v-if="column.dataIndex === 'memberType'">
          <div>
            <table-dict-cell-prop :dict="dictCollection['member_type']" :value="record.memberType"/>
          </div>
        </template>
        <template v-if="column.dataIndex === 'operate'">
          <a-button type="link" @click="formModal.showEditForm(record.id)">修改</a-button>
          <a-button type="link" @click="deleteSingle(record.id)" danger>删除</a-button>
        </template>
      </template>
    </a-table>
    
  </div>


  <!-- detail -->
  <MemberDetail ref="formModal" @submit-callback="query"/>

</template>

<style scoped>
.query-handle-panel {
  border: 1px solid #e8e8e8;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  margin-bottom: 1rem;
  border-radius: 4px;
  background-color: white;
}

.query-form {
  margin: 1rem;
}

.handle-bar .ant-btn {
  margin-right: 1rem;
}

.table-container{
  padding: .5rem;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  background-color: white;
}
.table{
  margin-top: 1rem;
}

</style>